<template>
  <Box title="事件详情" class="event-detail" style="background: #e7eefc" direction="row">
    <Panel second direction="row">
      <!-- 事件信息 -->
      <div class="information">
        <h4 class="title">事件信息</h4>
        <div class="content scroll-hover">
          <div class="describe" v-for="item in eventDetail" :key="item.value">
            <span class="field">{{ item.title }}</span>
            <span class="text">{{ item.value }}</span>
          </div>
        </div>
      </div>

      <!-- 过程总览 -->
      <div class="process-overview">
        <h4 class="title">过程总览</h4>

        <!-- 交通管制过程总览 -->
        <a-timeline class="all-node" v-if="eventType == 'JGB1'">
          <a-timeline-item v-for="(value) in eventProcessOverview" :key="value.processName" :title="value.title">
            <template #dot> </template>
            <!-- 内容详情为 电话记录-->
            <div v-if="value.dataType == 2">
              <div class="process-title">{{ value.appendTime }} 电话记录</div>
              <VoicePlay :src="'http://zhdd.jchc.cn/kg_fksc/prov/playTelByPath?path=' + value.recordpath"> </VoicePlay>
            </div>
            <!-- 内容详情为 发送短信-->
            <div class="process-content" v-else-if="value.dataType == 5">
              <div class="process-title">{{ value.appendTime }} 发送短信</div>
              <div class="eventdetails">
                {{ value.smsgMessagecontent ? value.smsgMessagecontent : '(无)' }}
              </div>
            </div>
            <!-- 内容详情为 接报-->
            <div class="process-content" v-else-if="value.dataType == 0">
              <div class="process-title">{{ value.appendTime }} 开始</div>
            </div>
            <!-- 内容详情为 图片-->
            <div class="process-content view-img" v-else-if="value.dataType == 1">
              <div class="process-title">{{ value.appendTime }} 通知{{ value.operateType == 0 ? '开通' : '关闭' }}</div>
              <div class="eventdetails" v-for="(val, ind) in value.stationname" :key="ind">
                {{ val ? val : '(无数据)' }}
              </div>
              <img
                id="viewImg"
                v-for="(values, photoIndex) in value.photoIds"
                :key="photoIndex + values.photoPath"
                :src="['https://zhdd.jchc.cn/kg_fksc/wpc/getImage.do?photoId=' + values.photoId]"
                @click="onImgClick('https://zhdd.jchc.cn/kg_fksc/pubevent/showPic?objName=' + values.photoPath)"
                alt="图片路径存在问题"
              />
            </div>
          </a-timeline-item>

          <Empty v-if="!eventProcessOverview || !eventProcessOverview.length" emptyData="暂无过程总览数据" />
        </a-timeline>

        <!-- 恶劣天气过程总览 -->
        <a-timeline class="all-node" v-else-if="eventType == 'TBB1'">
          <a-timeline-item v-for="(value, index) in eventProcessOverview" :key="index">
            <template #dot> </template>
            <!-- 内容详情为 电话记录-->
            <div>
              {{ value.appendDateTime && dayjs(value.appendDateTime).format('HH:mm') }}
              {{ value.nodeName }}
            </div>
            <div>{{ value.unitName }} {{ value.operateName }}</div>
          </a-timeline-item>

          <Empty v-if="!eventProcessOverview || !eventProcessOverview.length" emptyData="暂无过程总览数据" />
        </a-timeline>

        <!-- 障碍物、大流量过程总览 -->
        <a-timeline class="all-node" v-else-if="['TDB1', 'TDB2'].includes(eventType)">
          <a-timeline-item v-for="(value, index) in eventProcessOverview" :key="index">
            <template #dot> </template>
            <!-- 内容详情为 电话记录-->
            <div>{{ value.appendTime }}</div>
            <div>{{ value.staffName }}</div>

            <div v-if="value.dataType == 1 && eventType == 'TDB2'">
              <div class="process-title">电话记录</div>
              <VoicePlay :src="'http://zhdd.jchc.cn/kg_fksc/prov/playTelByPath?path=' + value.recordpath"> </VoicePlay>
            </div>
          </a-timeline-item>

          <Empty v-if="!eventProcessOverview || !eventProcessOverview.length" emptyData="暂无过程总览数据" />
        </a-timeline>

        <a-timeline class="all-node" v-else>
          <a-timeline-item v-for="(item, index) in eventProcessOverview" :key="item.processName" :title="item.title">
            <template #dot v-if="iconActive >= index"> </template>
            <div class="node-title">
              {{ item.processName || item.nodeName }}
              {{
                (item.processStartDate || item.appendDateTime) &&
                dayjs(item.processStartDate || item.appendDateTime).format('HH:mm')
              }}
            </div>
            <div class="node-text" v-for="(value, i) in item.trafficEventList" :key="i">
              <!-- 内容详情为 电话记录-->
              <div v-if="value.dataType == 1">
                <div class="process-title">
                  {{ value.startDateTime && dayjs(value.startDateTime).format('HH:mm') }} 电话记录
                </div>
                <VoicePlay :src="'http://zhdd.jchc.cn/kg_fksc/prov/playTelByPath?path=' + value.value"> </VoicePlay>
              </div>
              <!-- 内容详情为 发送短信-->
              <div class="process-content" v-else-if="value.dataType == 5">
                <div class="process-title">
                  {{ value.startDateTime && dayjs(value.startDateTime).format('HH:mm') }} 发送短信
                </div>
                <p class="eventdetails">
                  {{ value.value ? value.value : '(无)' }}
                </p>
              </div>
              <!-- 内容详情为 接报-->
              <div class="process-content" v-else-if="value.dataType == 6">
                <div class="process-title">
                  {{ value.startDateTime && dayjs(value.startDateTime).format('HH:mm') }} 接报
                </div>
                <p class="eventdetails">
                  {{ value.value ? value.value : '(无)' }}
                </p>
              </div>
              <!-- 内容详情为 图片-->
              <div class="process-content view-img" v-else-if="value.dataType == 9 && isJSON(value.value, false)">
                <div class="process-title">
                  {{ value.startDateTime && dayjs(value.startDateTime).format('HH:mm') }} 图片记录
                </div>
                <img
                  id="viewImg"
                  :src="['https://zhdd.jchc.cn/kg_fksc/wpc/getImage.do?photoId=' + isJSON(value.value).photoId]"
                  @click="
                    onImgClick('https://zhdd.jchc.cn/kg_fksc/pubevent/showPic?objName=' + isJSON(value.value).photoPath)
                  "
                  alt="图片路径存在问题"
                />
              </div>
            </div>
            <!-- <div class="node-text" v-if="item.trafficEventList && !item.trafficEventList.length">
              {{ item.processStartDate && dayjs(item.processStartDate).format('HH:mm') }} {{ item.processName }}
            </div> -->
          </a-timeline-item>

          <Empty v-if="!eventProcessOverview || !eventProcessOverview.length" emptyData="暂无过程总览数据" />
        </a-timeline>
      </div>

      <a-spin class="spin-loading" v-show="spinning" />
    </Panel>

    <!-- 显示放大的图片 -->
    <a-modal
      :width="510"
      :visible="imgVisible"
      :destroyOnClose="true"
      class="img-model"
      :footer="false"
      :closable="false"
      @cancel="imgVisible = false"
    >
      <img class="over-view-img" :src="imgUrl" />
    </a-modal>
  </Box>
</template>

<script>
export default {
  name: 'EventDetail'
}
</script>
<script setup>
/**
 * 事件详情(二级)
 * @author 阳坤（1194636148@qq.com）
 * @date   时间：2022/10/26
 */

import Panel from '../../components/panel'
import eventApi from '../../api/event.js'
import Box from '../../components/detail/Box.vue'
import VoicePlay from '../../components/voice-play'
import { message } from 'ant-design-vue'
import { filterEventDetail } from './details'
import Empty from '../../components/empty'
import dayjs from 'dayjs'

import { ref, watch, defineProps } from 'vue'

const props = defineProps({
  // 数据项
  data: {
    type: Object,
    default: () => {}
  }
})

// loading
const spinning = ref(false)
// 事件类型
const eventType = ref()
// 事件详情
const eventDetail = ref({})
// 过程总览
const eventProcessOverview = ref({})
// 保存图片路径
const imgUrl = ref('')
// 控制图片放大弹出框显示隐藏
const imgVisible = ref(false)
// 进程到哪个节点
const iconActive = ref(null)

/**
 * 获取数据
 */
const getData = data => {
  spinning.value = true
  eventType.value = data.eventType
  const params = {
    eventId: data.eventId,
    eventType: data.eventType
  }
  // 获取事件详情
  eventApi
    .getEventDetails(params)
    .then(res => {
      if (res.data) {
        eventDetail.value = filterEventDetail(res.data, data.eventType)
      }
    })
    .catch(() => {
      message.error(`数据获取失败！`)
    })
    .finally(() => {
      setTimeout(() => {
        spinning.value = false
      }, 500)
    })
  // 获取过程总览
  eventApi
    .getProcessOverview(params)
    .then(res => {
      if (res.data) {
        eventProcessOverview.value = res.data
        processIconShow(res.data)
      }
    })
    .catch(err => {
      console.log('err', err)
      message.error(`数据获取失败！`)
    })
}

/**
 * 控制高亮到哪个阶段
 *
 * @param eventId  事件id
 *
 * */
const processIconShow = processList => {
  let processMax = 0
  ;(processList || []).forEach((item, index) => {
    // 如果数据内容与时间都有值，则已经到达这一阶段 储存索引放入processArr
    if ((item.trafficEventList && item.trafficEventList.length) || item.processStartDate || item.processEndDate) {
      if (index > processMax) processMax = index
    }
  })
  // 高亮到索引最大值阶段
  iconActive.value = processMax
}

/**
 * 打开图片
 * @param url
 * */
const onImgClick = url => {
  imgVisible.value = true
  imgUrl.value = url
}

/**
 * 判断是否是json
 * @param str   json对象
 * @param def   报错默认返回值
 * */
const isJSON = (str, def = {}) => {
  if (typeof str == 'string') {
    try {
      return JSON.parse(str)
    } catch (e) {
      console.log('error：不是json对象')
      return def
    }
  }
}

/**
 * 监听id变化
 */
watch(
  () => props.data.eventId,
  (newVal, oldVal) => {
    getData(props.data)
  },
  { deep: true, immediate: true }
)
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.event-detail {
  background-color: #e7eefc !important;

  .mz-panel {
    z-index: 9;
  }

  .information {
    width: 52%;
    border-right: 1px solid #93aee5;
    display: flex;
    flex-direction: column;
    padding-right: 10px;

    .content {
      flex: 1;

      .describe {
        margin-bottom: 5px;
        font-size: 12px;

        .field {
          color: #999999;
          min-width: 65px;
          display: inline-block;
        }

        .text {
          color: #333333;
          word-wrap: break-word;
          word-break: break-all;
          text-overflow: ellipsis;
          font-family: Source Han Sans CN, Source Han Sans CN-Regular;
          font-weight: 400;
        }
      }
    }
  }

  .process-overview {
    width: 48%;
    padding-left: 10px;
    display: flex;
    flex-direction: column;

    .all-node {
      flex: 1;
      overflow-y: auto;
      padding-top: 5px;

      .node-title {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
      }

      .node-text {
        font-size: 12px;
        font-weight: 400;
        color: #666;
        line-height: 12px;
        margin-bottom: 10px;
        .process-content {
          padding-right: 5px;
          .process-title {
            margin-bottom: 5px;
          }

          .eventdetails {
            line-height: 16px;
            word-wrap: break-word;
            word-break: break-all;
          }
        }
      }

      .node-voice {
        margin-bottom: 10px;
      }

      .view-img {
        width: 100px;
        height: auto;
        cursor: pointer;
        margin-bottom: 10px;
        img {
          width: 100%;
          border-radius: 6px;
          border: 1px solid #266bf4;
          margin-bottom: 5px;
        }
      }
    }
    /deep/.ant-timeline-item {
      padding-bottom: 10px;
    }
    /deep/.ant-timeline-item-tail {
      border-left: 0.02rem solid #bed7fc;
      left: 0.04rem;
    }

    /deep/.ant-timeline-item-head {
      border: 0.01rem solid #1890ff;
    }

    /deep/.ant-timeline-item-head-custom {
      background-color: #4193ff;
      width: 10px;
      height: 10px;
      border-radius: 50% 50%;
    }
  }

  .title {
    width: 99px;
    height: 28px;
    margin-bottom: 15px;
    background: linear-gradient(0deg, #d4e2fb 0%, #e1ebfc 100%);
    text-align: center;
    color: @primary-color;
    line-height: 0.28rem;
    font-family: Source Han Sans CN, Source Han Sans CN-Medium;
    font-weight: 600;
    font-size: 16px;
  }
}
.over-view-img {
  width: 100%;
  height: auto;
  max-height: 84vh;
}
</style>
<style>
.img-model .ant-modal-body {
  padding: 0;
}
</style>
